<template>
  <view :data-theme="globPrimary">
    <!-- #ifdef MP || APP-PLUS -->
    <view class="status-bar" :style="{ height: globStatusBarHeight + 'px' }"></view>
    <view :style="{ width: '100%', height: globStatusBarHeight + 'px' }"></view>
    <!-- #endif -->
    <view class="learn-wrap" v-if="hasLogin">
      <view class="learn-basic-wrap">
        <view class="learn-basic">
          <view class="item">
            <view class="date">
              <template v-if="learnTime(learnBasic.today_learn_time, 2) > 0">
                <text>{{ learnTime(learnBasic.today_learn_time, 2) }}</text>
                小时
              </template>
              <template v-if="learnTime(learnBasic.today_learn_time, 3) > 0">
                <text>{{ learnTime(learnBasic.today_learn_time, 3) }}</text>
                分钟
              </template>
              <template
                v-if="
                  $u.test.empty(learnBasic.today_learn_time) || learnBasic.today_learn_time == 0
                "
              >
                <text>{{ learnTime(learnBasic.today_learn_time, 3) }}</text>
                分钟
              </template>
            </view>
            <view class="desc">今日学习</view>
          </view>
          <view class="item">
            <view class="date">
              <template v-if="learnTime(learnBasic.week_learn_time, 1) > 0">
                <text>{{ learnTime(learnBasic.week_learn_time, 1) }}</text>
                天
              </template>
              <template v-if="learnTime(learnBasic.week_learn_time, 2) > 0">
                <text>{{ learnTime(learnBasic.week_learn_time, 2) }}</text>
                小时
              </template>
              <template v-if="learnTime(learnBasic.week_learn_time, 3) > 0">
                <text>{{ learnTime(learnBasic.week_learn_time, 3) }}</text>
                分钟
              </template>
              <template
                v-if="$u.test.empty(learnBasic.week_learn_time) || learnBasic.week_learn_time == 0"
              >
                <text>{{ learnTime(learnBasic.week_learn_time, 3) }}</text>
                分钟
              </template>
            </view>
            <view class="desc">本周学习</view>
          </view>
          <view class="item">
            <view class="date">
              <template v-if="learnTime(learnBasic.total_learn_time / 60, 1) > 0">
                <text>{{ learnTime(learnBasic.total_learn_time / 60, 1) }}</text>
                天
              </template>
              <template v-if="learnTime(learnBasic.total_learn_time / 60, 2) > 0">
                <text>{{ learnTime(learnBasic.total_learn_time / 60, 2) }}</text>
                小时
              </template>
              <template v-if="learnTime(learnBasic.total_learn_time / 60, 1) == 0">
                <text>{{ learnTime(learnBasic.total_learn_time / 60, 3) }}</text>
                分钟
              </template>
              <template v-if="learnBasic.total_learn_time == 0">
                <text>{{ learnTime(learnBasic.total_learn_time / 60, 3) }}</text>
                分钟
              </template>
            </view>
            <view class="desc">累计学习</view>
          </view>
        </view>
      </view>
      <view class="learn-latest">
        <view class="u-flex learn-latest__section">
          <view class="section-title">最近在学</view>
          <view class="section-more" @click="toRoute('/pageUser/user/list/learn/record')"
            >更多</view
          >
        </view>
        <view v-if="learnLatest.length > 0" class="learn-latest-scroll">
          <scroll-view scroll-x>
            <view class="learn-latest-list">
              <view
                class="latest-item"
                @click="onStartLearning(item)"
                v-for="item in learnLatest"
                :key="item.id"
              >
                <view class="img-wrap">
                  <courseImage
                    width="100%"
                    height="140"
                    :image="item.course_cover"
                    :courseType="item.course_type"
                    :courseTypeText="item.course_type_text"
                  >
                  </courseImage>
                  <view
                    class="time u-line-1"
                    v-if="item.section_data_type == 3 || item.section_data_type == 4"
                  >
                    总学时:{{ item.total_time | handleTime }}</view
                  >
                  <view class="time" v-else>
                    {{ item.current_time | formatSeconds('学习至hh:mm:ss') }}
                  </view>
                </view>
                <view class="title u-line-1">{{ item.section_title }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view v-else class="empty-text">你最近没有在学的课程哦~</view>
      </view>
      <u-sticky
        h5-nav-height="0"
        :enable="enable"
        @fixed="onStickyFixed"
        @unfixed="onStickyUnfixed"
      >
        <view class="learn-sticky">
          <view :style="{ height: stickyFixedStatusBarHeight + 'px' }"></view>
          <view
            class="learn-sticky__section u-flex"
            :style="{
              height: globNavbarHeight + 'px',
              paddingRight: stickyFixedRightButtonWidth + 'px',
            }"
          >
            <view class="section-title">加入的课程</view>
            <view class="section-right u-rela">
              <u-icon
                name="study_shaixuan"
                custom-prefix="edu-icon"
                color="#606266"
                size="44"
                @click="clickOrder"
              ></u-icon>
              <view class="section-popover u-abso" v-show="orderVisible">
                <view
                  class="item"
                  :class="{ active: item.key === order }"
                  v-for="item in orderData"
                  :key="item.key"
                  @click="handleOrderSwitch(item.key)"
                  >{{ item.title }}</view
                >
              </view>
            </view>
          </view>
          <view class="learn-sticky__nav">
            <view
              class="item"
              v-for="item in learnCourseTab"
              :key="item.key"
              :class="{ active: item.key == learnCourseKey }"
              @click="handleCourseSwitch(item.key, item.id)"
            >
              {{ item.title }}
            </view>
          </view>
        </view>
      </u-sticky>
      <view class="learn-course">
        <view class="list" v-if="!$u.test.empty(learnNormal)">
          <view class="item" v-for="item in learnNormal" :key="item.course_id">
            <view class="title u-line-2" @click="goCourse(item.course_id)">{{
              item.course_title
            }}</view>
            <view class="parallel">
              <view class="content">
                <view class="time" v-if="item.expire_rest == -1">永久有效</view>
                <view class="time" v-else>
                  距离课程到期还有<text class="red">{{ item.expire_rest }}</text
                  >天</view
                >
                <view class="progress">
                  <u-line-progress
                    :active-color="globPrimaryColor"
                    :percent="item.finished_rate"
                    :height="8"
                    :show-percent="false"
                    inactive-color="#F1F1F1"
                  ></u-line-progress>
                  <text class="rate">{{ item.finished_rate }}%</text>
                </view>
              </view>
              <view v-if="item.finished_rate >= 100" class="btn disabled">已完成</view>
              <view v-else class="btn" @click="onJumpCoursePage(item)">{{
                item.finished_rate < 100 && item.finished_rate > 0 ? '继续学习' : '开始学习'
              }}</view>
            </view>
          </view>
        </view>
        <u-divider v-if="learnExpired.length != 0" margin-bottom="32">过期课程</u-divider>
        <view class="expire-course">
          <view class="item" v-for="(item, index) in learnExpired" :key="index">
            <view class="title u-line-2">{{ item.course_title }}</view>
            <view class="expire">课程已过期</view>
          </view>
        </view>
        <edu-empty
          v-if="$u.test.empty(learnNormal) && $u.test.empty(learnExpired)"
          description="暂无课程~"
        ></edu-empty>
      </view>
    </view>
    <view
      class="learn-empty"
      :style="{ height: globWindowHeight - globStatusBarHeight - 50 + 'px' }"
      v-else
    >
      <edu-empty description="登录后查看更多内容~"></edu-empty>
      <view class="btn" @click="toRoute('/pageUser/login/index')">登录</view>
    </view>

    <view class="tabbar-wrap">
      <u-tabbar
        :list="tabbarList"
        :active-color="globPrimaryColor"
        inactive-color="#303133"
      ></u-tabbar>
    </view>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import tabbarList from '@/settings/tabbarSetting.js'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  data() {
    return {
      tabbarList,
      enable: true,
      learnBasic: {},
      learnLatest: [],
      learnNormal: [],
      learnExpired: [],
      learnCourseTab: [
        {
          key: 'video',
          title: '点播',
          id: 1,
        },
        {
          key: 'live',
          title: '直播',
          id: 2,
        },
        {
          key: 'classes',
          title: '班级',
          id: 4,
        },
      ],
      learnCourseKey: 'video',
      courseTypeClass: {
        1: 'video',
        2: 'live',
        3: 'multipart',
        4: 'classes',
      },
      order: 'learn',
      type: 1,
      orderData: [
        {
          key: 'add',
          title: '最近加入的优先',
        },
        {
          key: 'learn',
          title: '最近学习的优先',
        },
      ],
      orderVisible: false,
      stickyFixedRightButtonWidth: 0,
      stickyFixedStatusBarHeight: 0,
      directoryItemData: null,
    }
  },
  created() {
    // 登录后执行
    if (this.hasLogin) {
      this.getLearnList(this.order)
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globNavbarRightButtonWidth: 'projectSetting/globNavbarRightButtonWidth',
      globWindowHeight: 'projectSetting/globWindowHeight',
      hasLogin: 'user/getHasLogin',
    }),
  },
  onShow() {
    this.enable = true
    if (this.hasLogin) {
      this.getLearnList(this.order)
      this.recordCourse(1, this.order)
      this.learnCourseKey = 'video'
    }
  },
  onHide() {
    this.enable = false
  },
  filters: {
    //处理图文时间
    handleTime(val) {
      if (val < 60) {
        return `${val}秒`
      } else if (val < 3600) {
        let result = parseInt(val)
        let m =
          Math.floor((result / 60) % 60) < 10
            ? '0' + Math.floor((result / 60) % 60)
            : Math.floor((result / 60) % 60)
        let s =
          Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60)
        return `${m}分${s}秒`
      } else if (val >= 3600) {
        let result = parseInt(val)
        let h =
          Math.floor(result / 3600) < 10
            ? '0' + Math.floor(result / 3600)
            : Math.floor(result / 3600)
        let m =
          Math.floor((result / 60) % 60) < 10
            ? '0' + Math.floor((result / 60) % 60)
            : Math.floor((result / 60) % 60)
        let s =
          Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60)
        return `${h}小时${m}分${s}秒`
      }
    },
  },
  options: {
    styleIsolation: 'shared',
  },
  methods: {
    getLearnList(key) {
      this.$edu.api.getCourseStudy().then((res) => {
        const {
          data: { basic, latest },
        } = res
        this.learnBasic = basic
        this.learnLatest = latest
      })
    },
    recordCourse(type, key) {
      this.$edu.api
        .getCourseRecordCourse({
          course_type: type,
          order: key,
        })
        .then((res) => {
          const {
            data: { normal, expired },
          } = res
          this.learnNormal = normal
          this.learnExpired = expired
        })
    },
    // 课程切换
    handleCourseSwitch(key, id) {
      this.learnCourseKey = key
      this.type = id
      this.recordCourse(id, this.order)
    },
    // 进度条提示文字
    toPercent(percentage) {
      if (percentage <= 0) {
        return `开始学习`
      } else if (percentage >= 100) {
        return `已完成`
      } else {
        return `继续学习`
      }
    },
    // 切换类型
    handleOrderSwitch(key) {
      if (key != this.order) {
        this.order = key
        this.orderVisible = false
        this.recordCourse(this.type, this.order)
      }
    },
    toRoute(u) {
      this.$u.route(u)
    },
    learnTime(time, unit = 1) {
      if (this.$u.test.empty(time) || time == 0) return 0
      let day = Math.floor(time / (24 * 60))
      let hour = Math.floor((time - day * 24 * 60) / 60)
      let minute = Math.floor(time - day * 24 * 60 - hour * 60)
      if (unit == 1) {
        return day
      } else if (unit == 2) {
        return hour
      } else if (unit == 3) {
        return minute
      }
    },
    clickOrder() {
      this.orderVisible = !this.orderVisible
    },
    // 跳转课程
    goCourse(id) {
      if (id == 0) return
      this.$u.route('/pageCourse/course/details', {
        id: id,
      })
    },
    // 最近在学
    onStartLearning(item) {
      // 缓存课时的item
      let sectionData = {
        id: item.section_id,
        course_id: item.course_id,
        title: item.section_title,
        is_buy: 1,
        section_data: {
          data_type: item.section_data_type,
          duration: 0,
          stock: item.stock,
        },
        section_rate: {
          current_time: item.current_time,
        },
      }
      this.directoryItemData = sectionData
      // 点播
      this.onJumpVideo(item)
    },
    // 进入点播播放
    onJumpVideo(item) {
      if (item.expire_rest == 0) {
        this.$u.toast('课程已过期')
      } else {
        // 人脸
        // 缓存课时的item
        this.$store.commit('course/setCurrentPlayItem', this.directoryItemData)
        this.$u.route('/pageCourse/course/video/index', {
          id: item.course_id,
          sid: item.section_id,
        })
      }
    },
    // 进入课程详情
    onJumpCoursePage(item) {
      // 缓存课时的item
      let sectionData = {
        id: 0,
        course_id: item.course_id,
      }
      this.directoryItemData = sectionData
      // 人脸
      this.$u.route('/pageCourse/course/video/index', {
        id: item.course_id,
      })
    },
    // 组件吸顶时触发
    onStickyFixed() {
      this.stickyFixedRightButtonWidth = this.globNavbarRightButtonWidth
      this.stickyFixedStatusBarHeight = this.globStatusBarHeight
    },
    // 组件取消吸顶时触发
    onStickyUnfixed() {
      this.stickyFixedRightButtonWidth = 0
      this.stickyFixedStatusBarHeight = 0
    },
  },
}
</script>

<style lang="scss">
.status-bar {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;
  background: #ffffff;
}
.learn-wrap {
  .learn-basic-wrap {
    padding: 30rpx;
    background-color: #ffffff;
  }
  .learn-basic {
    padding: 0 35rpx;
    height: 200rpx;
    display: flex;
    align-items: center;
    border-radius: 16rpx;
    @include bg-color();
    background-image: url('@/static/images/study_card_img.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .item {
      text-align: center;
    }

    .item + .item {
      margin-left: auto;
    }

    .date {
      font-size: 20rpx;
      color: #ffffff;

      text {
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .desc {
      margin-top: 6rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .learn-latest {
    padding: 45rpx 0;
    margin-bottom: 16rpx;
    background-color: #ffffff;
    .learn-latest__section {
      padding: 0 30rpx;
      .section-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #303133;
      }
      .section-more {
        font-size: 28rpx;
        font-weight: 400;
        color: #909399;
        margin-left: auto;
      }
    }
    .learn-latest-scroll {
      margin-top: 20rpx;
      padding-left: 30rpx;
      .learn-latest-list {
        display: flex;
        .latest-item {
          flex: 0 0 auto;
          width: 250rpx;
          margin-right: 20rpx;
          .img-wrap {
            position: relative;
            .time {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 10;
              padding: 0 10rpx;
              font-size: 20rpx;
              font-weight: 400;
              color: #ffffff;
              line-height: 32rpx;
              height: 32rpx;
              background: rgba(48, 49, 51, 0.5);
            }
          }
          .title {
            margin-top: 14rpx;
            font-size: 26rpx;
            font-weight: 400;
            line-height: 38rpx;
            color: #303133;
          }
        }
      }
    }
    .empty-text {
      font-size: 26rpx;
      font-weight: 400;
      color: #b7bac1;
      text-align: center;
      padding: 60rpx 0;
    }
  }

  .learn-sticky {
    padding: 0 30rpx 20rpx;
    background-color: #ffffff;
    .learn-sticky__section {
      .section-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #303133;
      }
      .section-more {
        font-size: 28rpx;
        font-weight: 400;
        color: #909399;
        margin-left: auto;
      }
      .section-right {
        margin-left: auto;
      }
      .section-popover {
        top: 60rpx;
        right: 0;
        width: 246rpx;
        padding: 26rpx 30rpx;
        background: #ffffff;
        box-shadow: 0 2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
        border-radius: 4rpx;
        z-index: 999;

        .item + .item {
          margin-top: 28rpx;
        }

        .item {
          font-size: 26rpx;
          font-weight: 400;
          color: #303133;
          text-align: center;
        }

        .item.active {
          @include text-color();
        }
      }
    }

    .learn-sticky__nav {
      display: flex;
      .item {
        width: 130rpx;
        height: 55rpx;
        background: #f7f7f7;
        border-radius: 28rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #606266;
        text-align: center;
        line-height: 55rpx;
        margin-bottom: 10rpx;

        &.active {
          color: #ffffff;
          @include bg-color();
        }
      }

      .item + .item {
        margin-left: 24rpx;
      }
    }
  }

  .learn-course {
    padding: 0 30rpx 13rpx;
    background-color: #ffffff;
    .list {
      .item {
        padding: 24rpx;
        margin-bottom: 20rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 16rpx;
        .title {
          font-size: 30rpx;
          font-weight: 500;
          color: $edu-main-color;
          line-height: 40rpx;
        }

        .parallel {
          margin-top: 40rpx;
          display: flex;
          align-items: center;
          .time {
            font-size: 22rpx;
            color: $edu-tips-color;
          }
          .red {
            color: $edu-type-error;
          }
          .progress {
            margin-top: 4rpx;
            display: flex;
            align-items: center;
          }
          .u-progress {
            width: 350rpx;
          }
          .rate {
            margin-left: 24rpx;
            width: 60rpx;
            font-size: 22rpx;
            font-weight: 400;
            color: #888888;
          }
          .btn {
            margin-left: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140rpx;
            height: 56rpx;
            font-size: 24rpx;
            font-weight: 400;
            border-radius: 28rpx;
            border-width: 2rpx;
            border-style: solid;
            @include text-color();
            @include border-color();
            &.disabled {
              color: #b7bac1;
              border-color: #b7bac1;
            }
          }
        }

        .right {
          flex: 1;
          margin-left: 25rpx;
          max-width: 52%;

          .end_time {
            margin-top: 10rpx;
            height: 40rpx;
            line-height: 40rpx;
            font-size: 20rpx;
            color: rgb(144, 147, 153);
          }

          .percent {
            margin-top: 30rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            text-align: right;

            &.blue {
              @include text-color();
            }
          }

          .u-progress {
            display: flex;
            margin-top: 5rpx;
          }
        }
      }
    }
    .expire-course {
      .item {
        padding: 24rpx;
        margin-bottom: 20rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 16rpx;
        .title {
          font-size: 30rpx;
          font-weight: 500;
          color: $edu-tips-color;
          line-height: 40rpx;
        }
        .expire {
          margin-top: 16rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: $edu-tips-color;
          line-height: 30rpx;
        }
      }
    }
  }
}

.learn-empty {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: content-box;
  .btn {
    margin: 118rpx auto 0;
    width: 220rpx;
    height: 72rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 72rpx;
    @include bg-color();
    border-radius: 40rpx;
  }
}

.tabbar-wrap {
  background-color: #ffffff;
}
</style>
